<template>
  <div>
    <van-nav-bar
      :title="this.title"
      right-text="客服"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-tabs v-model="active" @click="onClick">
      <van-tab v-for="(item,index) in titles" :key="index" :title=item.name ：}></van-tab>
        <router-view></router-view>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "0",
      title: "课程名称",
      activeName: "a",
      titles: [
        {
          name: "任务",
          address: "/study",
        },
        {
          name: "章节",
          address: "/study/chapter",
        },
        {
          name: "更多",
          address: "/study/more",
        },
      ],
    };
  },
  methods: {
   onClick(i){
// console.log(i);
    this.$router.push(this.titles[i].address)
   },
    onClickLeft() {
      console.log(1111);
      this.$router.go(-2);
    },
    onClickRight() {
      console.log(2222);
    },
  },
};
</script>

<style scoped>
/deep/.van-tab {
  background-color: #eee;
  border: 0.5px 0 solid;
}
/deep/.van-icon {
  color: black;
}
/deep/.van-tabs__line {
  background-color: #1989fa;
}
</style>